import 'package:flutter/material.dart';
import 'package:flutter_swiper_plus/flutter_swiper_plus.dart';
import 'package:get/get.dart';
import 'package:study_demo/ui/swiper/controller.dart';

import '../../base/BaseController.dart';

class SwiperPagePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<SwiperActionController>(
        init: SwiperActionController(),
        builder: (controller) {
          return _SwiperLayout(context, controller);
        });
  }

  _SwiperLayout(BuildContext context, SwiperActionController controller) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播图'),
      ),
      body: ListView(
        children: <Widget>[
          firstSwiperView(context, controller),
          SecondSwiperView(context, controller),
          ThirdSwiperView(context, controller)
        ],
      ),
    );
  }

  ///实现android中ViewPager轮播的效果
  Widget firstSwiperView(
      BuildContext context, SwiperActionController controller) {
    return Container(
      padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
      width: Get.width,
      height: 250,
      child: Swiper(
        itemCount: 4,
        itemBuilder: (BuildContext context, int index) {
          //条目构建函数传入了index,根据index索引到特定图片
          return controller.imageList[index];
        },
        pagination: SwiperPagination(
          alignment: Alignment.bottomCenter,
          margin: const EdgeInsets.fromLTRB(0, 0, 15, 10),
          builder: DotSwiperPaginationBuilder(
              color: Colors.black54, activeColor: Colors.white),
        ),
        controller: SwiperController(),
        autoplay: true,
        //是否自动播放
        onTap: (index) => toast('您点击了第$index'),
      ),
    );
  }

  Widget SecondSwiperView(
      BuildContext context, SwiperActionController controller) {
    return Container(
      padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
      width: Get.width,
      height: 250,
      child: Swiper(
        itemCount: 4,
        itemBuilder: (BuildContext context, int index) {
          //条目构建函数传入了index,根据index索引到特定图片
          return controller.imageList[index];
        },
        pagination: SwiperPagination(
          alignment: Alignment.bottomCenter,
          margin: const EdgeInsets.fromLTRB(0, 0, 15, 10),
          builder: DotSwiperPaginationBuilder(
              color: Colors.black54, activeColor: Colors.white),
        ),
        controller: SwiperController(),
        scrollDirection: Axis.horizontal,
        autoplay: true,
        viewportFraction: 0.8,
        scale: 0.9,
        //是否自动播放
        onTap: (index) => toast('您点击了第$index'),
      ),
    );
  }

  Widget ThirdSwiperView(
      BuildContext context, SwiperActionController controller) {
    return Container(
      padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
      width: Get.width,
      height: 250,
      child: Swiper(
        itemCount: 4,
        itemBuilder: (BuildContext context, int index) {
          //条目构建函数传入了index,根据index索引到特定图片
          return controller.imageList[index];
        },
        pagination: SwiperPagination(
          alignment: Alignment.bottomCenter,
          margin: const EdgeInsets.fromLTRB(0, 0, 15, 10),
          builder: DotSwiperPaginationBuilder(
              color: Colors.black54, activeColor: Colors.white),
        ),
        controller: SwiperController(),
        autoplay: true,
        itemWidth: 400,
        itemHeight: 300,
        layout: SwiperLayout.TINDER,
        //是否自动播放
        onTap: (index) => toast('您点击了第$index'),
      ),
    );
  }
}
